<template>
    <div class="pages">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <van-sticky>
                <div class="header">
                    <div class="fls" @click="$router.back(-1)">
                        <img src="../../../static/images/icon-back.png" alt="">
                    </div>
                    <div class="centern">商户查询</div>
                    <div class="frs_right" @click="inater()">
                        <img src="../../../static/images/icon-shcx-shhb.png" alt="">
                        <div class="titlecenter">商户划拨</div>
                    </div>
                </div>
                <div class="activestype">
                    <div class="fistbox" v-for="(item,index) in listinbbx" :key="index" @click="typeys(index)">
                        <div  :class="avitves==index ? 'actiewbs' :'' ">{{item}}</div>
                        <div :class="avitves == index ? 'xian' :'' "></div>
                    </div>
                </div>
                <div class="search">
                    <div class="search_icon">
                        <form action="/">
                        <van-search v-model="value" shape="round" :show-action = "false" placeholder="请输入商户名称" @search="onSearch" @cancel="onCancel" />
                        </form>
                    </div>
                    <div class="search_right" @click="show = true">
                        <div class="btn_text">{{actiontit}}</div>
                        <img src="../../../static/images/icon-arrow.png" alt="">
                    </div>
                </div>
            </van-sticky>

            <!-- 终端循环列表 -->
            <div class="c_ibodys" v-if="avitves == 0">
                <van-pull-refresh v-model="refreshing" @refresh="onDownRefresh">
                    <van-list
                    v-model="loading"
                    :finished="finished"
                    :immediate-check="false"
                    :offset="20"
                    finished-text="我是有底线的"
                    @load="onLoad">
                        <div class="a_list" v-for="(item,index) in a_list" :key="index" @click="BusinessInformation()">
                            <div class="a_header">
                                <div class="a_userinfo">
                                    <div class="a_pic">
                                        <!-- <img src="" alt=""> -->
                                    </div>
                                    <div class="a_shopName">{{item.merccnm}}</div>
                                </div>
                                <div class="active_type" v-if="item.type==0">直属</div>
                                <div class="dai_shenhe" v-if="item.review.reviewStatus == 'WAIT' ">待审核</div>
                                <div class="dai_shenhe" v-if="item.review.reviewStatus== 'PROCESSING' ">审核中</div>
                                <div class="bohui" v-if="item.review.reviewStatus == 'FINISH' || item.review.reviewResult == 'REJECTED' ">已驳回</div>
                            </div>

                            <div class="manager">维护业务经理：{{item.expandingManager}}</div>
                            <div class="address">{{item.province}}-{{item.city}}-{{item.area}}</div>
                            <div class="a_bottom">
                                <!-- <div class="mendianshu">门店数：12346</div>
                                <div class="zhongduanshu">终端数：12346</div> -->
                            </div>
                        </div>
                    </van-list>
                </van-pull-refresh>
            </div>

            <!-- 立牌循环列表 -->
            <div class="c_ibodys" v-if="avitves == 1">
                <van-pull-refresh v-model="refreshing" @refresh="onDownRefresh">
                    <van-list
                    v-model="loading"
                    :finished="finished"
                    :immediate-check="false"
                    :offset="20"
                    finished-text="我是有底线的"
                    @load="onLoad">
                        <div class="a_list" v-for="(item,index) in b_list" :key="index" @click="BusinessInformation()">
                            <div class="a_header">
                                <div class="a_userinfo">
                                    <div class="a_pic">
                                        <!-- <img src="" alt=""> -->
                                    </div>
                                    <div class="a_shopName">{{item.merchantName}}</div>
                                </div>
                                <div class="active_type" v-if="item.type==0">直属</div>
                                <div class="dai_shenhe" v-if="item.review.reviewStatus == 'WAIT' ">待审核</div>
                                <div class="dai_shenhe" v-if="item.review.reviewStatus== 'PROCESSING' ">审核中</div>
                                <div class="bohui" v-if="item.review.reviewStatus == 'FINISH' || item.review.reviewResult == 'REJECTED' ">已驳回</div>
                            </div>

                            <div class="manager">维护业务经理：{{item.cusMgrCode}}</div>
                            <div class="address">{{item.province}}-{{item.city}}-{{item.area}}</div>
                            <div class="a_bottom">
                                <!-- <div class="mendianshu">门店数：12346</div>
                                <div class="zhongduanshu">终端数：12346</div> -->
                            </div>
                        </div>
                    </van-list>
                </van-pull-refresh>
            </div>


            <van-action-sheet v-model="show" :actions="actions"  cancel-text="取消" @select="onSelect" close-on-click-action @cancel="onCancel"/>
        </van-pull-refresh>
    </div>
</template>

<script>
import { Toast } from 'vant';
import Vue from 'vue'
import api from '../../api/MerchantsQuery'
Vue.prototype.$api = api
export default {
    beforeCreate () {
        document.querySelector('body').setAttribute('style', 'background:#f5f5f5')
    },
    data(){
        return{
            avitves:0,
            listinbbx:['终端商户','立牌商户'],
            count: 0,
            isLoading: false,
            value: '',
            show: false,
            actiontit:'按业务经理查询',
            actions: [{ name: '按业务经理查询' }, { name: '按商户名称查询' }],
            // 终端商户
            a_list:[
                {type:0},{type:1},{type:2},{type:0},{type:0}
            ],
            // 立牌商户
            b_list:[],

            nullTip: '空空如也~',
            
            page: 0, //页码
            loading: false, //上拉加载
            finished: false, //上拉加载完毕
            refreshing: false, //下拉刷新


            merchantName:'',
            manager:''
        }
    },
    mounted(){
        // 终端商户查询
        this.terminal();
    },
    methods:{
        typeys(index){
            this.avitves = index
            this.page = 0;
            if(index == 0){
                this.merchantName = ''
                this.manager = ''
                this.terminal() // 终端商户查询
            }else{
                this.merchantName = ''
                this.manager = ''
                this.lipaiqrcode();//立牌商户查询
            }
        },
        onDownRefresh() {
            let _this = this;
            _this.page = 0;
            _this.refreshing = false;
            if(_this.teamsList.length>20){
                _this.finished = false;  //加载中
            }
            _this.loading = false;
            this.terminal() // 终端商户查询
        },
        // 上拉加载请求方法
        onLoad() {
            let _this = this;
            this.page++
            this.teams()
            _this.loading = true;
        },
        // 终端商户查询
        terminal(){
            const _this = this;
            let data = {
                page:this.page,
                size:20,
                merchantName:this.merchantName,
                manager:this.manager
            }
            this.$api.terminal(data).then((res)=>{
                console.log(res);
                if(res.status == '0000'){
                    this.isLoading = false;
                    if (res.payload.content.length > 0) {

                    if (_this.page > '0') {
                        if (_this.loading) {
                            if(res.payload.content.length < '20'){
                                _this.a_list = _this.a_list.concat(res.payload.content);
                                _this.finished = true;  //完成加载
                            }else{
                                _this.a_list = _this.a_list.concat(res.payload.content);
                                _this.finished = false;  //加载中
                            }
                        }
                    }else{
                        if(res.payload.content.length < '20'){
                            _this.a_list = res.payload.content; //第一次加载
                            _this.finished = true;  //完成加载
                        }else{
                            _this.a_list = res.payload.content; //第一次加载
                        }
                    }

                    }else {
                        _this.a_list = [];
                    }
                }
            })
        },

        // 立牌商户查询
        lipaiqrcode(){
            const _this = this;
            let data = {
                page:this.page,
                size:20,
                merchantName:this.merchantName,
                manager:this.manager
            }
            this.$api.lipaiqrcode(data).then((res)=>{
                console.log(res);
                if(res.status == '0000'){
                    this.isLoading = false;
                    if (res.payload.content.length > 0) {

                    if (_this.page > '0') {
                        if (_this.loading) {
                            if(res.payload.content.length < '20'){
                                _this.b_list = _this.b_list.concat(res.payload.content);
                                _this.finished = true;  //完成加载
                            }else{
                                _this.b_list = _this.b_list.concat(res.payload.content);
                                _this.finished = false;  //加载中
                            }
                        }
                    }else{
                        if(res.payload.content.length < '20'){
                            _this.b_list = res.payload.content; //第一次加载
                            _this.finished = true;  //完成加载
                        }else{
                            _this.b_list = res.payload.content; //第一次加载
                        }
                    }

                    }else {
                        console.log(123131313);
                        _this.b_list = [];
                    }
                }
            })
        },


        onSelect(item){
            this.actiontit = item.name
        },
        onSearch(val) {
            // Toast(val);
            if(this.avitves == 0){
                if(this.actiontit == '按业务经理查询' ){
                    this.manager = val
                    this.merchantName = ''
                }
                if(this.actiontit == '按商户名称查询' ){
                    this.merchantName = val
                    this.manager = ''
                }
                this.terminal() // 终端商户查询
            }else{
                if(this.actiontit == '按业务经理查询' ){
                    this.manager = val
                    this.merchantName = ''
                }
                if(this.actiontit == '按商户名称查询' ){
                    this.merchantName = val
                    this.manager = ''
                }
                this.lipaiqrcode();
            }
            
        },
        onCancel() {
            Toast('取消');
        },

        // 下拉刷新
        onRefresh() {
            this.page = 0;
            if(this.avitves == 0){
                this.terminal() //终端商户查询
            }
            setTimeout(() => {
                Toast('刷新成功');
                this.isLoading = false;
                this.count++;
            }, 1000);
        },
        // 商户信息
        BusinessInformation(){
            this.$router.push({ name: "BusinessInformation" });
        },
        // 商户划拨
        inater(){
            this.$router.push({ name: "commercial_transfer" });
        },
    }
}
</script>

<style scoped>
    .pages{
        width: 100%;
    }
    .header{
        width: 100%;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        box-sizing: border-box;
        background: #3288FF;
    }
    .header>.fls{
        width: 28%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .header>.fls>img{
        width: 24px;
        height: 24px;
    }
    .centern{
        color: #FFFFFF;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 17px;
        letter-spacing: 0px;
    }
    .frs_right{
        width: 28%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .frs_right>img{
        width: 24px;
        height: 24px;
    }
    .titlecenter{
        color: #FFFFFF;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 14px;
        letter-spacing: 0px;
        margin-left: 8px;
    }
    
    .search{
        width: 100%;
        height: 44px;
        background: #3288FF;
        padding: 0 22px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .search_icon{
        width: 66%;
    }
    .van-search{
        width: 100%;
        border-radius: 20px;
        background: #FFFFFF;
        padding: 0 !important;
    }
    .search_right{
        display: flex;
        align-items: center;
    }

    .search_right>.btn_text{
        color: #FFFFFF;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 13px;
        letter-spacing: 0px;
    }
    .search_right>img{
        width: 16px;
        height: 16px;
    }


    .c_ibodys{
        width: 100%;
        padding: 16px;
        box-sizing: border-box;
    }
    .a_list{
        width: 100%;
        padding: 8px 16px 0px 16px;
        box-sizing: border-box;
        border-radius: 4px;
        background: #FFFFFF;
        margin-bottom: 16px;
    }
    .a_header{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .a_userinfo{
        display: flex;
        align-items: center;
        width: 64%;
    }
    .a_pic{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #C4C4C4;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .a_pic>img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }
    .a_shopName{
        width: 74%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #333333;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 16px;
        letter-spacing: 0px;
        margin-left: 8px;
    }
    .active_type{
        width: 72px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        border: 1px solid #3288FF;
        color: #3288FF;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 15px;
    }
    .dai_shenhe{
        width: 114px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #3288FF;
        color: #FFFFFF;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 16px;
        letter-spacing: 0px;
    }
    .bohui{
        width: 114px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #EB5757;
        color: #FFFFFF;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 16px;
        letter-spacing: 0px; 
    }

    .manager{
        width: 100%;
        display: flex;
        align-items: center;
        margin-top: 11px;
        color: #4F4F4F;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 14px;
        letter-spacing: 0px;
    }
    .address{
        width: 100%;
        display: flex;
        align-items: center;
        margin-top: 16px;
        color: #4F4F4F;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 14px;
        letter-spacing: 0px;
    }

    .a_bottom{
        margin-top: 16px;
        border-top: 1px solid #F2F2F2;
        width: 100%;
        height: 46px;
        display: flex;
        align-items: center;
        color: #4F4F4F;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 14px;
        letter-spacing: 0px;
    }
    .zhongduanshu{
        margin-left: 40px;
    }

    .activestype{
        width: 100%;
        height: 42px;
        background: #FFFFFF;
        display: flex;
        align-items: center;
        padding-bottom: 2px;
    }

    .fistbox{
        width: 50%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        font-family: OPPOSans;
        font-weight: regular !important;
        font-size: 16px;
        color: #828282;
    }
    .actiewbs{
        color: #333333 !important;
        font-family: OPPOSans;
        font-weight: bold !important;
        font-size: 16px;
    }
    .xian{
        width: 100%;
        height: 4px;
        background: #3288FF;
        position: absolute;
        bottom: 0;
    }
</style>